<template>

</template>

<script>
import OneTemplate from "@/components/template/common/OneTemplate"
export default {
  name: "TaskException",
  props: {
    templateInfo: {
      type: Object,
      default: {
        attrs: []
      }
    },
    taskInfo: {
      type: Object,
      default: {
        taskTitle: "猫狗二分类数据标注",
        taskType: "图片分类",
        publisher: "西安交通大学软件学院",
        taskReward: 10,
        taskDesc: "如果你能够在规定时间内完成标注任务，您将获得丰厚的积分奖励，同时有机会与本系统开发团队面对面交流哦！",
        taskReq: "请您认真批注，一旦发现作弊，将不予结算积分，同时全平台通报~",
      }
    },
    markInfoList: {
      type: Array,
      default: [{
        taskContent: {
          fileUrl: "10.jpg"
        },
        markDetailList: [
          {
            attrValueList: []
          }
        ]
      }]
    },
    drawId: {
      type: Number
    },
    current: {
      type: Number
    },
    annotate: {
      Boolean,
      default: false
    }
  },
  components: {
    "one-template": OneTemplate
  },
  data() {
    return {
      taskInfoVis: false,
      submitVis: false,
      currentIdx: 0, // 当前看到的样本的下标，随“下一步/上一步变化”
      currentStartIdx: 0, // 本次标注的第一个样本下标，不随“下一步/上一步”变化
      lastFinishIdx: 0, // 上一次标注时完成的最后一个样本下标
      currentMaxIdx: 0, // 本次标注过程中到达过的最大的样本下标--用于修改本次标注结果的判断
      totalNum: '',
      welcomeVis: true
    }
  },
  mounted() {
    this.currentIdx = this.current
    this.lastFinishIdx = this.current - 1
    this.currentStartIdx = this.current
    this.currentMaxIdx = this.markInfoList.length
    // 如果不是annotate状态（预览状态），需要为赋一些默认初始值
    if (!this.annotate) {
      // 标记不显示welcome弹窗
      this.welcomeVis = false
      // 1. 为markDetailList赋值
      for (let i = 0; i < 100; i++){
        this.markInfoList[0].markDetailList.push({
          "attrValueList": []
        })
      }
      // 2. 为fileUrl赋值
      // if (this.templateInfo.contentKind == 'image') {
      //   this.markInfoList.taskContent.fileUrl = '10.jpg'
      // }
      // if (this.templateInfo.contentKind == 'video') {
      //   this.markInfoList.taskContent.fileUrl = '/video/1.mp4'
      // }
      // // TODO audio/text还没写
      // if (this.templateInfo.contentKind == 'text') {
      //   // this.markInfoList.taskContent.fileUrl = '/video/1.mp4'
      // }
      // if (this.templateInfo.contentKind == 'audio') {
      //   // this.markInfoList.taskContent.fileContent = '/video/1.mp4'
      // }
    }
    this.setData()
  },
  methods: {
    setData(){
      //let markInfoList = this.templateInfo.markInfoList
      //this.markInfoList = this.templateInfo.markInfoList
     console.log(this.markInfoList)
    },
    // 获取时间YYYY-MM-DD HH:MM:SS
    getTime() {
      let date=new Date();
      let year=date.getFullYear();
      let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    },
    // 获取毫秒时间
    getMilliTime() {
      let timer = new Date()
      return timer.getTime()
    },
    //  点击下一张按钮
    nextPage () {
      // 如果是第一次到达该样本，都要记录该样本的endTime,warning,useTime
      if (this.currentIdx >= this.currentMaxIdx){
        this.markInfoList[this.currentIdx].endTime = this.getTime()
        this.markInfoList[this.currentIdx].endMilliTime = this.getMilliTime()
        this.markInfoList[this.currentIdx].useTime = this.markInfoList[this.currentIdx].endMilliTime - this.markInfoList[this.currentIdx].startMilliTime
        if (this.markInfoList[this.currentIdx].useTime < parseInt(this.taskInfo.taskExceptionTime)*1000) {
          this.markInfoList[this.currentIdx].warning = true
        }
      }
      // 修改update字段，本次新批注为2，修改之前的批注为1(在prev函数中修改)
      if (this.currentIdx >= this.currentMaxIdx) {
        this.markInfoList[this.currentIdx].update = 2
      }
      // 如果不是最后一个对currentIdx加1，并记录下一个的开始时间
      if (this.currentIdx < this.markInfoList.length - 1) {
        this.currentIdx = this.currentIdx + 1
        this.markInfoList[this.currentIdx].startTime = this.getTime()
        this.markInfoList[this.currentIdx].startMilliTime = this.getMilliTime()
        // 修改currentMaxIdx
        if (this.currentIdx > this.currentMaxIdx) {
          this.currentMaxIdx = this.currentIdx
        }
      }
      // 若是最后一个，弹出提交按钮
      else {
        //this.submitVis = true
      }
    },
    // 点击上一张按钮
    prevPage () {
      // 修改update字段
      if (this.currentIdx > 0) {
        this.currentIdx = this.currentIdx - 1
        // 修改update字段，本次新批注为2(在next函数中修改)，修改之前的批注为1
        if (this.currentIdx <= this.lastFinishIdx) {
          this.markInfoList[this.currentIdx].update = 1
        }
      } else {
        this.$message.warning('当前是第一张!')
      }
    },
    // 开始标注-设置本次第一个样本的开始时间
    startAnnotate () {
      this.welcomeVis = false
      this.markInfoList[this.currentIdx].startTime = this.getTime() // YYYY-MM-DD HH:MM:SS格式
      this.markInfoList[this.currentIdx].startMilliTime = this.getMilliTime() // 毫秒
    },
    // 提交发布结果
    async submit () {
      // 如果是从中途提交标注的，需要记录本次标注最后一个样本的endTime, warning, useTime
      if (this.currentIdx >= this.currentMaxIdx){
        this.markInfoList[this.currentIdx].endTime = this.getTime()
        this.markInfoList[this.currentIdx].endMilliTime = this.getMilliTime()
        this.markInfoList[this.currentIdx].useTime = this.markInfoList[this.currentIdx].endMilliTime - this.markInfoList[this.currentIdx].startMilliTime
        if (this.markInfoList[this.currentIdx].useTime < parseInt(this.taskInfo.taskExceptionTime)*1000) {
          this.markInfoList[this.currentIdx].warning = true
        }
      }
      // 标记update
      if (this.currentIdx < this.currentStartIdx) {
        this.markInfoList[this.currentIdx].update = 1
      } else {
        this.markInfoList[this.currentIdx].update = 2
      }
      let markResult = {
        drawId: this.drawId,
        markInfoList: this.markInfoList
      }
      // 修改select attr的格式为["", ""]
      // 逐个样本
      for (let i = 0; i <= this.currentMaxIdx; i++) {
        // 该样本的逐个attr（题目）
        for (let j = 0; j < this.markInfoList[i].markDetailList.length; j++) {
          // 如果是单选
          if (this.markInfoList[i].markDetailList[j].attrValueList.length == undefined) {
            // 转为String
            this.markInfoList[i].markDetailList[j].attrValueList += ''
            // 转为String Array
            this.markInfoList[i].markDetailList[j].attrValueList = [this.markInfoList[i].markDetailList[j].attrValueList]
          }
          // 多选
          else {
            // 每一个元素由Number转为String
            for (let k = 0; k < this.markInfoList[i].markDetailList[j].attrValueList.length; k++) {
              this.markInfoList[i].markDetailList[j].attrValueList[k] += ''
            }
          }
          }
      }
      // 调用后端接口
      const { data: res } = await this.$http.post('/task/annotater/labelTask/changeMarkResult', markResult)
      if (res.code == 200) {
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
      this.submitVis = false
      // 跳转到标注列表
      this.$router.push('/task/drawList')
    }
  }
}
</script>

<style scoped>
/*整个模板*/
.template {
  height: 90%;
  width: 100%;
}
/*模板标题*/
.template_title {
  font-size: 20px;
  font-weight: bold;
}
/*模板内容*/
.template_content {
  padding-top: 20px;
}
/*图片格式*/
.image_media{
  height: 280px;
  width: 380px;
  border-radius: 5px;
}
/*文字媒体*/
.text_media {
  width: 100%;
  height: 100%;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
}
/*第x个/共x个*/
.current_total {
  font-size: 15px;
  margin: 20px;
}
/*右侧每个属性*/
.attribute {
  justify-content: center;
  padding-left: 50px;
  padding-right: 50px;
}
</style>
